<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-03-05 15:39:13
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-14 11:42:35
 * @FilePath: /hr_new_vue3/src/views/Management/Organization/OrganizationManagement/Structure/MoveMergeHistory/PersonChange/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 组织人事异动详情 -->
<template>
  <ContentCard>
    <template #header>
      <PageHeaderNew title="查看详情" showBack />
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-space>
          <template #split>
            <a-divider direction="vertical" />
          </template>
          <span>原组织名称：{{ data.reMergeOrganizationName }}</span>
          <span
            >原组织员工人数：{{
              data.reMergeOrganizationNumber
                ? data.reMergeOrganizationNumber
                : 0
            }}
          </span>
        </a-space>
      </template>
    </ConditionBox>
    <a-table :data="data?.userModel" stripe column-resizable row-key="id">
      <template #columns>
        <a-table-column :width="80" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="userName"
          title="员工名称"
          align="center"
        />
        <a-table-column
          :width="200"
          data-index="reDepartmentName"
          title="原组织"
          align="center"
        />
        <a-table-column
          :width="200"
          data-index="rePositionName"
          title="原职位"
          align="center"
        />
        <a-table-column
          :width="200"
          data-index="newPositionName"
          title="新职位"
          align="center"
        >
        </a-table-column>
        <a-table-column :width="200" title="操作" align="center" fixed="right">
          <template #cell="{ record }">
            <a-space :size="0">
              <a-button type="text" @click="go(record.id, 1)"
                >考勤设定</a-button
              >
              <a-button
                type="text"
                v-if="record.flag === 2"
                @click="go(record.id, 2)"
                >签署合同</a-button
              >
              <a-button type="text" @click="go(record.id, 3)"
                >设置审批</a-button
              >
              <a-button type="text" @click="go(record.id, 4)"
                >设置绩效</a-button
              >
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </ContentCard>
</template>

<script lang="tsx" setup>
import { Message } from '@arco-design/web-vue';
import {
  GetOrganizationPersonChangeDetail,
  PutOrganizationPersonChange
} from '@/apis/management/organization/organizationManagement';
import { GetPositionListByDepartmentId } from '@/apis/management/organization/positionManagement';
import { cloneDeep } from 'lodash';

const router = useRouter();
const route = useRoute();

const type = +route.params.type; // 1 移动 2 合并
const id = +route.params.id;

const data = ref({}); // 储存数据
const getData = async (pageData?: any) => {
  try {
    data.value = await GetOrganizationPersonChangeDetail({ id });
  } catch (error: unknown) {
    console.log(error);
  }
};

const go = (record: any, type: 1 | 2 | 3 | 4) => {
  switch (type) {
    case 1:
      // router.push({
      //   name: 'AttendanceSetting',
      //   params: {
      //     id: record
      //   }
      // });
      break;
    case 2:
      router.push({
        name: 'ContractWaitSigned'
      });
      break;
    case 3:
      router.push({
        name: 'approvalCenter'
      });
      break;
    case 4:
      // router.push({
      //   name: 'ApprovalSetting',
      //   params: {}
      // });
      break;
    default:
      break;
  }
};

getData();
</script>

<style scoped lang="less">
.approve {
  margin-top: 20px;
  .title-box {
    position: relative;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      border-radius: 4px;
      font-weight: 700;
      margin-bottom: 10px;
      background: #edeffd;
    }
  }

  .title-box::before {
    position: absolute;
    // top: 33px;
    left: 10px;
    display: inline-block;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    margin-right: 20px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }
}
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}

// 垂直滚动条统一往外
:deep(.arco-scrollbar-track-direction-vertical) {
  right: -15px;
}
// 水平滚动条统一往外
:deep(.arco-scrollbar-track-direction-horizontal) {
  bottom: -15px;
}

:deep(.arco-table-td) {
  height: 40px;
}

:deep(.arco-table-th) {
  height: 45px;
  font-weight: 700;
}
</style>
